
<div class="component list">
    <table datatable [dtOptions]="dtOptions" class="row-border hover">
        <thead>
            <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Birthday</th>
                    <th>Address</th>
                    <th>Email</th>
            </tr>
        </thead>
        <tbody *ngIf="data?.length != 0">
            <tr *ngFor="let item of data">
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ item.Birthday }}</td>
                    <td>{{ item.Address }}</td>
                    <td>{{ item.Email }}</td>
            </tr>
        </tbody>
        <tbody *ngIf="data?.length == 0">
            <tr>
                <td colspan="14 " class="no-data-available">No data!</td>
            </tr>
        <tbody>
    </table>
</div>  